<template>
  <div class="pay1">
    <div class="pay-item" v-for="(img,index) in imgs" :key="index"> 
        <img :src="img.picSrc">
        <div style="font-pay-item">
            <p style="text-align:center;margin-left:7px">{{img.title}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import p1 from './images/01.png'
import p2 from './images/02.png'
import p3 from './images/03.png'
import p4 from './images/04.png'
import p5 from './images/05.png'
import p6 from './images/06.png'
import p7 from './images/07.png'
import p8 from './images/08.png'
export default {
    name:'UserPay',
    data() {
        return {
            imgs:[],
            titles:['交通费用','借出','京东白条','饮食','书本','信用卡','维修','一般'],
            pics:[p1,p2,p3,p4,p5,p6,p7,p8],
        }
    },

    mounted(){
        for(let i = 0; i < 8; i++){
            this.imgs.push({title:this.titles[i],picSrc:this.pics[i]});
        }
    }
}
</script>

<style scoped>
    .pay1{
        margin-left: 5vw;
        width: 90vw;
        height: 88vh;
        /* background-color: aqua; */
        overflow: auto;
    }
    .pay-item{
        height: 12vh;
        width: 20vw;
        /* background: #000; */
        margin-right: 7px;
        float: left;
        /* line-height: 12vh; */
    }
    .pay-item img{
        height: 6vh;
        margin-left: 5vw;
        margin-top: 1vh;
    }
    .font-pay-item{
        height: 2vh;
        float: left;
        width: 20vw;
    }
</style>